<template>
    <div>
        <div class="head">
            <div>
                <el-form inline size="small">
                    <el-form-item>
                        <el-input placeholder="请输入管理员名称" v-model="searchForm.nickname" clearable style="width: 150px"
                                  @keyup.enter.native="searchData"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入手机号" v-model="searchForm.mobile" clearable
                                  @keyup.enter.native="searchData"
                                  style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="searchData">搜索</el-button>
                        <el-button icon="el-icon-search" type="danger" @click="clearForm">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        plain
                        @click="open_dialog('add')">新增
                </el-button>
            </div>
        </div>
        <el-table :data="tableData" border v-loading="loading" empty-text="暂无数据">
            <el-table-column label="管理员编号" width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sysUserId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="管理名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="头像" align="center">
                <template slot-scope="scope">
                    <el-image
                            class="img-wrap"
                            v-if="scope.row.avatar"
                            :src="scope.row.avatar"
                            :preview-src-list="scope.row.avatar | toArray"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.mobile }}</span>
                </template>
            </el-table-column>
            <el-table-column label="角色名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.roleTitle }}</span>
                </template>
            </el-table-column>
            <el-table-column label="部门名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.deptName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.locked===2" class="invalid">不可用</span>
                    <span v-if="scope.row.locked===1" class="active">可用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">

                    <el-button plain size="mini" type="success"
                               @click="handleCommand('edit',scope.row.sysUserId)">编辑
                    </el-button>
                    <el-button plain size="mini"
                               type="danger" @click="handleCommand('del', scope.row.sysUserId)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </div>
        <admin-detail
                ref="detail"
                :dialogVisible.sync="dialogVisible"
                :type="type"
                :editId="editId"
                @submit="resetData"
        />
    </div>
</template>

<script>
    import {admin_list, admin_del} from "@/api/sysuser";
    import adminDetail from "./module/admin-detail";

    export default {
        components: {
            adminDetail: adminDetail,
        },
        data() {
            return {
                editId: 0,
                dialogVisible: false,
                type: "add",
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                searchForm: {
                    nickname: "",
                    mobile: "",
                },
                loading: false,
            };
        },
        mounted() {
            this.getData();
        },
        methods: {
            /**
             * 事件切换
             */
            handleCommand(cmd, id) {
                if (cmd === 'edit') {
                    this.open_dialog('edit', id)
                    this.$emit("editId", id)
                }
                if (cmd === 'del') {
                    this.delAdmin(id)
                }
            },
            /**
             * 重新获取数据
             */
            resetData() {
                this.currentPage = 1;
                this.dialogVisible = false;
                this.getData();
            },

            clearForm() {
                this.searchForm = {};
                this.currentPage = 1;
                this.getData();
            },


            /**
             * 搜索数据
             */
            searchData() {
                this.currentPage = 1;
                this.getData();
            },
            /**
             * 打开新增的窗口
             */
            open_dialog(type, editId) {
                this.dialogVisible = true;
                this.type = type;
                this.editId = editId;

            },
            /**
             * 删除用户
             *
             */
            delAdmin(id) {
                this.$confirm("是否删除该用户?", "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    admin_del(id).then((res) => {
                        if (res.status === 200) {
                            this.getData();
                            this.$message.success("删除成功")
                        }
                    });
                });
            },
            /**
             * 获取分页数据
             */
            getData() {
                this.loading = true;
                let params = {};
                params.pageNumber = this.currentPage;
                params.pageSize = this.pageSize;
                params.mobile = this.searchForm.mobile;
                params.nickname = this.searchForm.nickname;
                admin_list(params).then((res) => {
                    this.loading = false;
                    this.total = Number(res.data.total);
                    this.tableData = res.data.list;
                });
            },
            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getData();
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getData();
            },
        },
    };
</script>

<style lang="less">
</style>
